import {
  Button,
  message,
  Modal,
  notification,
  Row,
  Space,
  TypographyText,
  Upload
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as xlsx from 'xlsx'

import { marketingApi, riverApi } from '@/apis'
import { LabelItem } from '@/apis/commonMenyTypes'
import { importOrders } from '@/apis/riverTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useBack, useDialog } from '@/hooks'
import { bus, download, downloadLink, optionsToMap } from '@/utils'
import { readFile } from '@/utils'
import { handlePrice } from '@/utils/bsshow'
import {
  forceOptions,
  successOptions
} from '@/views/river/financeManage/constants'

export default defineComponent({
  name: 'ExpressDetail',
  props: {
    peoples: {
      type: Array as PropType<Array<importOrders>>,
      required: true
    }
  },
  emits: ['dataCallback'],
  setup(props, { emit }) {
    const createTime = ref()
    const changeCount = ref()
    const createUser = ref()
    const newRowNum = ref([] as any[])
    const showSetPriceDlg = ref(false)
    const optionGoodsItemCur = ref({} as any)
    const syncLoading = ref(false)
    const peopleList = ref(props.peoples as any[])
    const showSortDialog = ref(false)
    const dialogLoading = ref(false)
    const { showConfirm } = useDialog()
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          slots: {
            buttons: 'batchButtons'
          }
        },
        formConfig: {
          items: []
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        checkboxConfig: {
          showHeader: true,
          range: true
        },
        columns: [
          {
            title: '原始单号',
            field: 'orderSn'
          },
          {
            title: '正确物流单号',
            field: 'logisticsNo'
          },
          {
            title: '正确物流公司',
            field: 'logisticsName'
          },
          {
            title: '仓库',
            field: 'warehouse'
          },
          {
            title: '反馈日期',
            field: 'feedbackDate',
            width: 150,
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '原因备注',
            field: 'causeRemarks'
          },
          {
            title: '商品名称',
            field: 'productName'
          },
          {
            title: '状态',
            field: 'isSuccess',
            formatter: ({ cellValue }) => {
              return optionsToMap(successOptions)[cellValue]
            }
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const id = router.currentRoute.value.query.id
              createTime.value = router.currentRoute.value.query.createTime
              changeCount.value = router.currentRoute.value.query.changeCount
              createUser.value = router.currentRoute.value.query.createUser
              const data = await marketingApi.getExpressionShow({
                changeExpressId: id,
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })

              return data
            }
          }
        }
      }
    } as ProTableProps)

    onMounted(() => {
      bus.on('refreshJdgGoodsList', () => {
        nextTick(() => {
          tableRef.value.refresh()
        })
      })
    })
    //获取选中的项
    function getSelectedItems() {
      return tableRef.value.table?.getCheckboxRecords()
    }

    const router = useRouter()

    //刷新回调
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }

    function handleRefresh(data) {
      peopleList.value = data
    }
    const { handleCancel } = useBack('refreshUnpackList')
    return {
      createTime,
      changeCount,
      createUser,
      tableRef,
      tableConfig,
      showSetPriceDlg,
      optionGoodsItemCur,
      syncLoading,
      showSortDialog,
      dialogLoading,
      peopleList,
      handleCancel,
      handleRefresh,
      getSelectedItems
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            batchButtons: () => (
              <Space>
                <span>
                  更换时间：
                  {new Date(parseInt(this.createTime)).toLocaleString()}
                </span>
                <span style={{ marginLeft: '200px' }}>
                  更换订单数量：{this.changeCount}
                </span>
                <span style={{ marginLeft: '200px' }}>
                  操作人：{this.createUser}
                </span>
              </Space>
            ),
            salePrice: ({ row }) => {
              return <Space>{handlePrice(row.salePrice, row.saleGold)}</Space>
            },
            isSettlement: ({ row }) => {
              return (
                <Space>
                  {row.isSettlement == 0 ? (
                    <TypographyText type="danger">否</TypographyText>
                  ) : (
                    <TypographyText type="success">是</TypographyText>
                  )}
                </Space>
              )
            }
          }}
          {...this.tableConfig}
        />
        <Space>
          <Button
            type="primary"
            onClick={this.handleCancel}
            style={{
              width: '200px',
              marginLeft: '152px',
              marginBottom: '50px'
            }}
          >
            返回列表
          </Button>
        </Space>
      </div>
    )
  }
})
